<template>
  <div class="login" v-loading="loginLoading">
    <div class="login_container">
      <div class="login_form">
        <p style="font-size: 30px;font-weight: bold; margin: 56px 0 40px;">账号登录</p>
        <div>
          <el-form
              ref="loginFormRef"
              :model="loginForm"
              status-icon
              size="large"
              :rules="loginRules"
              label-width="50px"
              class="demo-ruleForm"
          >
            <el-form-item label="账号" prop="account">
              <el-input style="width: 250px;" v-model="loginForm.account" ref="accountRef" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input style="width: 250px;" v-model="loginForm.password" type="password" autocomplete="off"/>
            </el-form-item>
            <p style="margin-bottom: 20px">已阅读并同意《xx协议》</p>
            <el-form-item>
              <div style="width: 100%;height: 100%;display: flex;justify-content: space-between">
                <el-button style="width: 45%" type="primary" @click="submitForm">Submit</el-button>
                <el-button style="width: 45%" @click="resetForm">Reset</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="qr_code_box" v-if="!isMobile()">
        <p style="font-size: 30px;font-weight: bold;width: 100%;text-align: center; margin: 56px 0 40px;">路径</p>
        <div class="qr_code_square">
          <img class="img" ref="img" :src="imgSrc" alt="">
<!--          <iframe :src="wxUrl" width="300px" height="400px" style="position: absolute;top: -48px;left: -1%"></iframe>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {httpRequest} from "@/untils/httpRequest";
import router from "@/router";
import { ElMessage } from 'element-plus'
import {isMobile} from "@/untils/untils";

let accountRef = ref(null)
let loginFormRef = ref(null)
let loginLoading =  ref(false)
let imgSrc = require('@/assets/logo.png')
let loginForm = ref({
  account: '',
  password: '',
})
let loginRules = ref({
  account: [
    {validator: validateAccount, trigger: 'blur'}
  ],
  password: [
    {validator: validatePassword, trigger: 'blur'}
  ],
})
let wxUrl = ref('')

function validateAccount(rule, value, callback) {
  if (!value) {
     callback(new Error('请输入账户'));
  }
  callback()
}

function validatePassword(rule, value, callback) {
  if (!value) {
     callback(new Error('请输入密码'));
  }
  callback()
}

function submitForm() {
  loginFormRef.value.validate((valid)=>{
    if(valid) {
      loginLoading.value = true
      const params = {
        account: loginForm.value.account,
        password: loginForm.value.password,
        v3: true //返回的菜单是vue2/vue3
      };
      httpRequest("POST", "/user/login", null, params, "proxy").then(res => {
        if (res.data.code === 200) {
          localStorage.setItem("menu_list", JSON.stringify(res.data.data.menu_list));
          localStorage.setItem("user", JSON.stringify(res.data.data.user));
          ElMessage.success(res.data.msg)
          if (isMobile()) {
            router.push('/mobile/home')
          } else {
            router.push('/')
          }
        } else {
          ElMessage.error(res.data.msg)
        }
        loginLoading.value = false
      });
    }
  })
}

function resetForm() {
  loginFormRef.value.resetFields()
}

function getWxQrCode() {
  let params = {
    appid: "wx55dbf016c113a65c",
    scope: "snsapi_login", //网页授权，目前网页只有这一种方式，静默授权
    redirect_uri: encodeURIComponent(`${document.location.protocol}//clercloud.com/cmc/#/login`),     //回调域名(地址前部分是项目域名，后部分loginSuccess是微信需要跳转的路径（vue中的路由名称）)
  };
  wxUrl.value = "https://open.weixin.qq.com/connect/qrconnect?appid=" + params.appid + "&scope=" + params.scope + "&redirect_uri=" + params.redirect_uri + "&state=";
}

function mockTest() {
  httpRequest("GET", "/mockTest", {}, {}, '', false).then(res => {
    console.log('mockTest:', res)
  })
}

onMounted(() => {
  getWxQrCode()
  accountRef.value.focus()
  // mockTest()
})
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/img/bg.jpg") no-repeat;
  background-size: cover;

  .login_container {
    width: 700px;
    height: 500px;
    border-radius: 4px;
    box-shadow: 0 0 10px gray;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .login_form {
      width: 300px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .qr_code_box {
      width: 300px;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .qr_code_square {
        width: 300px;
        height: 350px;
        position: absolute;
        top: 115px;
        overflow: hidden;
        .img {
          width: 100%;
        }
      }
    }
  }
}
</style>